<template>
  <el-dialog :visible="visible" :title="permissionForm.id ? '编辑权限点' : '添加权限点'" @close="dialogClose">
    <!-- 表单区域 -->
    <el-form
      ref="permissionRef"
      :model="permissionForm"
      :rules="permissionRules"
      label-width="80px"
    >
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="permissionForm.name" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="permissionForm.code" />
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input v-model="permissionForm.description" />
      </el-form-item>
      <el-form-item label="权限启用">
        <el-switch
          v-model="permissionForm.enVisible"
          active-value="1"
          inactive-value="0"
          active-text="启用"
          inactive-text="不启用"
        />
      </el-form-item>
    </el-form>
    <!-- 按钮区域 -->
    <template #footer>
      <div style="text-align: right">
        <el-button @click="$emit('dialog-close')">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { addPermission, getPermissionDetail, updatePermission } from '@/api/permission'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: [Number, String],
    pid: String
  },
  data() {
    return {
      permissionForm: {
        name: '', // 权限名称
        code: '', // 权限标识
        description: '', // 权限描述
        enVisible: '0', // 权限启用标识
        type: '', // 类型 区分当前是添加菜单权限点还是按钮权限点
        pid: '' // 添加到哪个节点下，权限点的父id
      },
      permissionRules: {
        name: [{ required: true, message: '请填写权限名称', trigger: 'blur' }],
        code: [{ required: true, message: '请填写权限标识', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 获取详情
    async fetchPermissionDetail(id) {
      const res = await getPermissionDetail(id)
      this.permissionForm = res.data
    },
    dialogClose() {
      this.$emit('dialog-close')
      // 清空表单和数据
      this.$refs.permissionRef.resetFields()
      // 字段中有些无法被 resetFields 方法清空，所以手动将 permissionForm 设置为最初始的状态
      this.permissionForm = {
        name: '',
        code: '',
        description: '',
        enVisible: '0',
        type: '',
        pid: ''
      }
    },
    // 添加/编辑权限点
    submit() {
      // 兜底校验
      this.$refs.permissionRef.validate(async valid => {
        if (!valid) return
        if (this.permissionForm.id) {
          // 编辑
          // 调用编辑权限点接口
          await updatePermission(this.permissionForm)
        } else {
          // 添加
          // 调用添加权限点接口
          await addPermission({
            ...this.permissionForm,
            type: this.type,
            pid: this.pid
          })
        }
        // 提示用户
        this.$message.success(`${this.permissionForm.id ? '编辑权限点成功' : '添加权限点成功'}`)
        // 关闭弹窗
        this.dialogClose()
        // 刷新列表
        this.$emit('fetch-permission-list')
      })
    }
  }
}
</script>
